<template>
    <div class="max">
      <img v-if="type === 'image'" :src="src" />
      <video v-else :src="src" controls autoplay></video>
      <Icon class="close" @click="$emit('close')" type="md-close" :size="35" />
    </div>
</template>

<script>
export default {
  name: 'max',
  props: {
    // 媒体类型
    type: {
      type: String,
      default: 'image'
    },
    // 地址
    src: {
      type: String,
      default: 'https://img2.baidu.com/it/u=1733235712,2835600239&fm=26&fmt=auto&gp=0.jpg'
    }
  }
}
</script>

<style scoped lang="less">
  .max{
    position: fixed;
    z-index: 1000;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    video{
      width: 100%;
      height: 100%;
    }
    .close{
      position: absolute;
      top:5px;
      right:10px;
      color: #fff;
      cursor: pointer;
    }
  }
</style>
